<template>
	<view class="order">
		<u-navbar title="订单" :safeAreaInsetTop="true" @rightClick="rightClick">

			<view class="u-nav-slot" slot="right">
				历史订单

			</view>
		</u-navbar>
		<view class="yhd">


			<u-tabs :list="list2" :current="tabsId" @click="tabsOn" :scrollable="true"></u-tabs>
		</view>
		<swiper :current="tabsId" @change="wzhd" :style="{ height: wsyData * 180 + 'px'}">
			<swiper-item v-for="(tab, index) in list2" :key="index">
				<view class="itemdata" v-if="listdata.length>0">
					<view class="itd" v-for="(item,ndex) in listdata" :key="ndex">
						<itemorderVue :item="item"></itemorderVue>



					</view>
				</view>
				<view class="" v-else>
					<u-empty mode="order">
					</u-empty>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import itemorderVue from './itemorder/itemorder.vue';
	export default {
		components: {
			itemorderVue
		},
		data() {
			return {
				tabsId: 0,
				listdata: [],
				list2: [{
						name: '待上门',
						badge: {
							value: 0
						},
						listdata: [{
							image: "/static/logo.png",
							fwjs: "日常保洁",
							yytime: "2023-10-17 23:00",
							fwstatus: 0,
							address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

						}, {
							image: "/static/logo.png",
							fwjs: "日常保洁2",
							yytime: "2023-10-17 23:00",
							fwstatus: 0,
							address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

						}, ]

					},
					{
						name: '待完工',
						listdata: [{
							image: "/static/logo.png",
							fwjs: "日常保洁",
							yytime: "2023-10-17 23:00",
							fwstatus: 1,
							address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

						}]

					},
					{
						name: '已完成',
						listdata: [{
							image: "/static/logo.png",
							fwjs: "日常保洁",
							yytime: "2023-10-17 23:00",
							fwstatus: 2,
							address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

						}]

					}, {
						name: '全部',
						listdata: [{
								image: "/static/logo.png",
								fwjs: "日常保洁",
								yytime: "2023-10-17 23:00",
								fwstatus: 0,
								address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

							}, {
								image: "/static/logo.png",
								fwjs: "日常保洁2",
								yytime: "2023-10-17 23:00",
								fwstatus: 0,
								address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

							},
							{
								image: "/static/logo.png",
								fwjs: "日常保洁",
								yytime: "2023-10-17 23:00",
								fwstatus: 1,
								address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

							},
							{
								image: "/static/logo.png",
								fwjs: "日常保洁",
								yytime: "2023-10-17 23:00",
								fwstatus: 2,
								address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

							}

						]

					}
				]
			}
		},
		computed: {
			wsyData() {

				return this.listdata.length




			}
		},
		created() {
			this.list2[0].badge.value = this.listdata.length
		},
		watch: {
			tabsId(news, old) {
				console.log("mews", news);
				if (news == 0) {
					this.getorder(1)
				}

				if (news == 1) {
					this.getorder(5)
				}
				if (news == 2) {
					this.getorder(6)
				}
				if (news == 3) {
					this.getList()
					// this.getorder(6)
				}
			}
		},
		mounted() {
			// this.getorder(1)
		},
		onShow() {
			console.log("suiji");
			this.tabsId = 0
			this.getorder(1)
		},
		methods: {
			getList() {
				const aa = uni.getStorageSync("userinfo")
				this.$http.get('/buyrOrder/searchorderbyid', {
					params: {
						userid: JSON.parse(aa).id
					}
				}).then(res => {
					console.log('res', res.result);
					this.listdata = res.result
				})
			},
			getorder(e) {
				const aa = uni.getStorageSync("userinfo")
				console.log(JSON.parse(aa).id);
				console.log(e);
				this.$http.post('/buyrOrder/Queryorderbyid?userid=' + JSON.parse(aa).id + "&orderstatus=" + e).then(
					res => {
						console.log('res', res.result);
						this.listdata = res.result
						// console.log(this.listdata);
					})
			},
			tabsOn(e) {
				//点击的时候切换的函数
				this.tabsId = e.index;
				// console.log(e);
			},

			wzhd(e) { //滑动切换的时候调用的函数
				this.tabsId = e.detail.current

				// console.log(e.detail.current);


			},
			rightClick() {
				// console.log('rightClick');
				uni.navigateTo({
					url: "/pages/order/historicalOrders/historicalOrders"
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3fffd;
	}

	.order {

		.yhd {
			margin-top: 53px;
			background-color: #ffffff;
			display: flex;
			// flex-direction: column;
			justify-content: space-evenly // align-items: center;
		}

		.itemdata {
			margin-top: 4px;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			border-radius: 8px;

			.itd {
				margin: 4px 8px;
				border-radius: 8px;
				background-color: #ffffff;
			}

		}
	}
</style>